import { useEffect, useRef, useState } from 'react'
import EHeader from '../../components/EHeader'
import coverrVideo from '../../assets/Photographer in mountains.mp4'

const SectionItemList = (props: any) => {
  const value = props.value as number[]
  const items = value.map((v) => {
    // 添加 id
    return <section id={`id${v}`} key={v} className="bg-red-500 relative h-200px mb-10px">{v}</section>
  })

  return (
    <>
      {items}
    </>
  )
}

const Index = () => {
  const [wh, setWh] = useState(0)

  const onResize = () => {
    const h = document.documentElement.clientHeight
    // 直接传入要修改的值
    setWh(h)
  }

  const videoRef = useRef<any>()
  const [changeHeaderColor, setChangeHeaderColor] = useState(false)
  const onScroll = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    const ch = document.body.clientHeight
    // 滚动高度 大于 可移动高度则改变菜单头部
    if (scrollTop >= (ch - 80)) {
      setChangeHeaderColor(true)
      // 视频暂停
      if (videoRef.current)
        videoRef.current.pause()
    }
    else {
      setChangeHeaderColor(false)
      // 视频播放
      if (videoRef.current)
        videoRef.current.play()
    }
  }

  useEffect(() => {
    onResize()

    window.addEventListener('resize', onResize, false)
    window.addEventListener('scroll', onScroll, false)

    return () => {
      window.removeEventListener('resize', onResize)
      window.removeEventListener('resize', onScroll)
    }
  })

  return (
    <>
      <EHeader style={{ backgroundColor: changeHeaderColor ? 'black' : '' }} />

      <section className="w-[100%] h-[100%] fixed top-0 left-0 z-0">
        {/* 视频没有撑开 少写样式了 w-[100%] h-[100%] object-cover */}
        <video loop autoPlay muted ref={videoRef} src={coverrVideo} className="w-[100%] h-[100%] object-cover" />
        {/* 从 vite2-vue3 粘贴过来(太懒了 不想写第二遍了) */}
        <div className="absolute top-0 left-0 w-[100%] h-[100%] bg-[rgba(12,12,13,0.5)] flex justify-center items-center text-white">
          <section>
            <h1 className="text-40px">从开始入门</h1>
            <h6 className="text-20px mt-30px">有点东西，但东西不多</h6>
          </section>
        </div>
      </section>

      {/* 后面再解决遍历问题 */}
      <section id="id0" style={{ marginTop: `${wh}px` }} className="mt-200px bg-white h-200px border-1px border-red-500 mb-10px relative z-1">
        {wh}
      </section>
      <SectionItemList value={[1, 2, 3, 4, 5]} />
      <section className="h-200px border-1px border-red-500 mb-10px relative z-1"></section>
      <section className="h-200px border-1px border-red-500 mb-10px relative z-1"></section>
      <section className="bg-white h-200px border-1px border-red-500 mb-10px relative z-1"></section>
    </>
  )
}

export default Index
